<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>添加删除记录练习</title>
    <link rel="stylesheet" type="text/css" href="../style/css1.css" />
    <script type="text/javascript">

        function delA() {
            //点击超链接后 删除超链接所在的行 this就是点击哪个超链接就是谁
            var tr=this.parentNode.parentNode;//获取当前tr
            // var name=tr.getElementsByTagName("td")[0].innerHTML;
            var name=tr.children[0].innerHTML;
            //删除之前弹出一个对话框 取消或者确认 单击按钮一下
            var flag=confirm("确认"+name+"删除吗");
            if (flag){
                tr.parentNode.removeChild(tr);//删除tr
            }
            return false;//取消超链接的默认行为
        }
        window.onload = function(){
            //点击超链接删除按钮  删除员工信息
            var allA=document.getElementsByTagName("a");//获取所有的a
            for (var i=0;i<allA.length;i++){
                allA[i].onclick=delA;
            }
            //添加员工信息 点击按钮以后 将员工的信息添加到表格中
            var addEmpButton=document.getElementById("addEmpButton");
            addEmpButton.onclick=function () {
                var name=document.getElementById("empName").value;
                var email=document.getElementById("email").value;
                var salary=document.getElementById("salary").value;
                // alert(name+","+email+","+salary)
                //需要将获取的信息添加到tr中 格式如下
                /*<tr>
               *    <td>Jerry</td>
                *   <td>jerry@sohu.com</td>
               *    <td>8000</td>
               *    <td><a href="deleteEmp?id=002">Delete</a></td>
               * </tr>
                */
                var tr=document.createElement("tr");//创建tr
                    tr.innerHTML="<td>"+name+"</td>"+
                                  "<td>"+email+"</td>"+
                                   "<td>"+salary+"</td>"+
                                   "<td><a href='javascript:;'>Delete</a></td>";
                 var a=tr.getElementsByTagName("a")[0];
                a.onclick=delA;
                var employeeTable=document.getElementById("employeeTable");//获取table的id
                //获取tbody
                //获取tbody
                var tbody=employeeTable.getElementsByTagName("tbody")[0];
                tbody.appendChild(tr);
            }
        };


    </script>
</head>
<body>
<script>
    /*for循环会在页面加载完成之后立即执行，而响应函数会在超链接被点击时才执行
       * 当响应函数执行时，for循环早已经执行完毕
   */

</script>
<table id="employeeTable">
    <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Salary</th>
        <th>&nbsp;</th>
    </tr>
    <tr>
        <td>Tom</td>
        <td>tom@tom.com</td>
        <td>5000</td>
        <td><a href="javascript:;">Delete</a></td>
    </tr>
    <tr>
        <td>Jerry</td>
        <td>jerry@sohu.com</td>
        <td>8000</td>
        <td><a href="deleteEmp?id=002">Delete</a></td>
    </tr>
    <tr>
        <td>Bob</td>
        <td>bob@tom.com</td>
        <td>10000</td>
        <td><a href="deleteEmp?id=003">Delete</a></td>
    </tr>
</table>

<div id="formDiv">

    <h4>添加新员工</h4>

    <table>
        <tr>
            <td class="word">name: </td>
            <td class="inp">
                <input type="text" name="empName" id="empName" />
            </td>
        </tr>
        <tr>
            <td class="word">email: </td>
            <td class="inp">
                <input type="text" name="email" id="email" />
            </td>
        </tr>
        <tr>
            <td class="word">salary: </td>
            <td class="inp">
                <input type="text" name="salary" id="salary" />
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <button id="addEmpButton" value="abc">
                    Submit
                </button>
            </td>
        </tr>
    </table>

</div>

</body>
</html>
